<script setup>

import {onMounted, reactive, ref} from "vue";
import {CLUB_TAG_OPTIONS, RULE} from "../../../const/index.js";
import {ElMessage} from "element-plus";
import router from "../../../router/index.js";
import MyNav from "../../../components/MyNav.vue";
import MyForm from "../../../components/MyForm.vue";
import {listApi, updateApi} from "../../../api/axios.js";
import {getResponseData} from "../../../request/index.js";

// 方向下拉菜单
let directionOptions = ref([]);

// 班级记录
let club = JSON.parse(sessionStorage.getItem('row'));
club['tag'] = club['tag'].split(', ');

// 路径导航
const navItems = [
  {icon: 'Platform', label: '班级管理', url: '/Club'},
  {icon: 'Platform', label: '班级列表', url: '/Club'},
  {icon: 'Edit', label: '修改班级'},
];


// 表单项 + 表单值 + 表单规则
let items = ref([
  {label: '班级名称', prop: 'title', required: true, span: 12},
  {label: '班级方向', prop: 'fkDirectionId', required: true, span: 12, type: 'select', options: directionOptions.value},
  {label: '开班时间', prop: 'startTime', type: 'datetime', required: true, span: 12},
  {label: '预计结班时间', prop: 'expectedEndTime', type: 'datetime', required: true, span: 12},
  {label: '班级标签', prop: 'tag', type: 'select', multiple: true, options: CLUB_TAG_OPTIONS, required: true},
  {label: '班级描述', prop: 'info', type: 'textarea'},
]);
let params = reactive(club);
let rules = {title: RULE.TITLE, info: RULE.INFO};

/* ======================================== 修改成功后 ================================================ */

function updateSuccess() {
  ElMessage.success('修改记录成功');
  setTimeout(() => router.push('/Club'), 1000);
}

/* ======================================== 加载函数 ================================================ */

onMounted(async () => {
  // 查询所有的班级方向，并添加到下拉菜单里
  Object.values(getResponseData(await listApi({module: 'direction'}))).forEach(direction => {
    directionOptions.value.push({label: direction['title'], value: direction['id']});
  })
})

</script>

<template>
  <my-nav :items="navItems"/>
  <el-card class="club-update-card" header="修改班级信息">
    <my-form type="update"
             :items="items"
             :params="params"
             :rules="rules"
             :api="updateApi"
             :args="{module: 'club'}"
             :callback="updateSuccess"/>
  </el-card>
</template>

<style scoped lang="scss">
 .club-update-card {
   width: 60%; /// 宽度
   margin: 65px auto 0; // 外边距
 }
</style>